﻿<style type="text/css">
    body {
        font-family: "STHeiti","Microsoft YaHei","黑体","arial";
    }

    .h42 {
        height: 42px;
    }

    .padding10 {
        padding-left: 10px;
        padding-right: 10px;
    }

    .padding5 {
        padding-left: 5px;
        padding-right: 5px;
    }

    .wzmb_banner .swiper-container {
        width: 100%;
        background: #fff;
    }

    .wzmb_banner .swiper-slide {
        position: relative;
        display: block;
        width: 100%;
        margin-right: 0px;
        padding-top: 56.27%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center; /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

        .wzmb_banner .swiper-slide > a {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0px;
            left: 0px;
        }

    .wzmb_banner .swiper-pagination-bullet {
        width: 8px;
        height: 2px;
        border-radius: 0px;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px; /*box-shadow: rgba(0,0,0,.5) 0 0 7px;*/
    }

    .wzmb_banner .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 0 3px;
    }

    .wzmb_banner .swiper-slide img {
        width: 100%;
    }

    .wzmb_banner .swiper-slide h3 {
        position: absolute;
        bottom: 0;
        left: 0;
        margin: 0;
        padding: 0 10px;
        width: 100%;
        background: rgba(0,0,0,0.3);
        height: 30px;
        line-height: 30px;
        font-size: 1.1em;
    }

        .wzmb_banner .swiper-slide h3 a {
            color: #fff;
        }

    .wzmb_banner.swiper-container-horizontal > .swiper-pagination-bullets, .wzmb_banner .swiper-pagination-custom, .wzmb_banner .swiper-pagination-fraction {
        left: auto;
        width: auto;
        right: 10px;
    }

    .wzmb_main a {
        display: block;
        margin-top: 10px;
        padding: 10px;
        background: #35aae7;
        color: #fff;
    }

        .wzmb_main a span {
            display: block;
        }

        .wzmb_main a i {
            display: block;
            margin-top: 5px;
            font-size: 3em;
            text-align: center;
        }

    .wzmb_qrcode {
        margin-bottom: 10px;
        text-align: center;
    }

        .wzmb_qrcode h3 {
            font-size: 1.5em;
        }

        .wzmb_qrcode img {
            max-width: 200px;
            box-shadow: 0 0 5px #000;
        }

    .wzmb_copy {
        color: #666;
        text-align: center;
    }

    .wzmb_bottom {
        position: fixed;
        bottom: 0;
        border-top: 1px solid #b3b3b3;
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#e7e4e7), to(#b9b9b9));
        width: 100%;
    }

        .wzmb_bottom ul {
            margin-bottom: 0;
            padding-left: 0;
            list-style: none;
        }

        .wzmb_bottom li {
            float: left;
            width: 25%;
        }

            .wzmb_bottom li a {
                display: block;
                padding: 10px 0;
                text-align: center;
                -webkit-box-flex: 1;
                background: rgba(255, 255, 255, 0.7);
                background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), color-stop(50%, rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0.2))), -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.1)), color-stop(50%, rgba(255, 255, 255, 0.3)), to(rgba(255, 255, 255, 0.1)));
                -webkit-background-size: 1px 100%, 1px 100%;
                background-size: 1px 100%, 1px 100%;
                background-position: 1px center, 2px center;
                background-repeat: no-repeat;
                font-size: 12px;
                text-shadow: 0 1px rgba(255, 255, 255, 0.3);
                color: #4f4d4f;
            }

                .wzmb_bottom li a i {
                    display: inline-block;
                    margin-top: -1px;
                    font-size: 20px;
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    vertical-align: middle;
                    color: #505359;
                }
</style>

<div class="page" id="page-index">
    <div class="content">
        <div class="content-inner">
            <div ng-app="app" ng-controller="APPCtrl">
                <div id="topnav" class="com swiper-container wzmb_banner" style="height: 210px;">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" ng-repeat="item in coms.topnav.list">
                            <a href="{{getlink(item)}}">
                                <img ng-src="{{item.wxico}}" />
                            </a>
                            <h3><a href="#" ng-bind="item.title"></a></h3>
                        </div>
                    </div>
                    <div class="swiper-pagination swiper-pagination-white"></div>
                </div>
                <div id="conbody" class="com padding5">
                    <div ng-class="'col-xs-'+item.wxsize" class="padding5 wzmb_main" ng-repeat="item in coms.conbody.list">
                        <a href="{{getlink(item)}}" ng-style="getbk(item.wxbk)"><span ng-bind="item.title"></span><i ng-class="item.wxico"></i></a>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div id="qcode_wrap" class="com container wzmb_qrcode">
                    <h3>专享二维码</h3>
                    <img ng-src="{{coms.qcode_wrap.list.wxico}}" alt="二维码" />
                </div>
                <div class="container wzmb_copy"><a href="http://www.z01.com">逐浪软件</a>技术支持</div>
                <div class="h42"></div>
                <div class="wzmb_bottom">
                    <ul id="footbar" class="com">
                        <li ng-repeat="item in coms.footbar.list">
                            <a href="{{getlink(item)}}"><i ng-class="item.wxico"></i><span ng-bind="item.title"></span></a>
                        </li>
                        <div class="clearfix"></div>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<link href="/design/h5/css/swiper.min.css" rel="stylesheet" />
<script src="/design/h5/js/swiper.min.js"></script>
<script>
    angular.module("app", []).controller("APPCtrl", function ($scope) {
        Zepto.init();
        Zepto.showIndicator();
        tools.site = "{$site}";
        tools.extend($scope);
        $scope.coms = [];
        //---------------------------------------------------------------------------//
        $scope.coms["topnav"] = { type: "nav", list: [] };
        $scope.coms["conbody"] = { type: "list", list: [] };
        $scope.coms["footbar"] = { type: "footbar", list: [] };
        $scope.coms["qcode_wrap"] = { type: "image", list: {} };//单条数据
        //---------------------------------------------------------------------------//
        //能否优化为一次取出,然后再划分(微站内容中的数据)
        tools.getdata({ nodename: escape("微站图片") }, function (result) {
            $scope.coms["topnav"].list = result;
            $scope.$digest();
            setTimeout(tools.nav.init, 500);
        })
        tools.getdata({ nodename: escape("微站内容"), dbtype: "footbar" }, function (result) {
            $scope.coms["footbar"].list = result;
            $scope.$digest();
        })
        tools.getdata({ flag: "qcode" }, function (result) {
            $scope.coms["qcode_wrap"].list = result[0];
            $scope.$digest();
        });
        tools.getdata({ nodename: escape("微站内容"), dbtype: "list" }, function (result) {
            var list = result;
            $scope.coms["conbody"].list = list;
            $scope.$digest();
            Zepto.hideIndicator();
            tools.init();
        });
    });
</script>
<style type="text/css">
    body {font-size:0.65rem;
    }
</style>